<script lang="ts" setup>
import { ref } from 'vue'
import { NCard, NButton, NSpace, NForm, NDivider, NGrid, NFormItemGi, NInput, NInputNumber, NRadioGroup, NRadio, NCheckboxGroup, NCheckbox, NSelect, NDatePicker, NTimePicker } from 'naive-ui'
import type { FormInst, FormItemRule } from 'naive-ui'
import { useFlowStore } from '../flowStore'
import type { DesignFormComponent } from '../model'
import UserInfoPopover from '../user-info-popover/index.vue'
const props = defineProps({
    closable: {
        type: Boolean,
        default: true
    }
})
const emits = defineEmits(["cancel", "tempSubmit", "submit"])
const flowStore = useFlowStore()

const formRef = ref<FormInst | null>(null)

function getFormRule(component: DesignFormComponent) {
    let rule: FormItemRule = {
        required: component.componentRequired === "1" ? true : false,
        message: component.componentPlaceholder ? component.componentPlaceholder : `请填写${component.componentName}`,
        trigger: ['input']
    }
    if (["Number", "DateTime", "Date", "Time"].includes(component.componentType)) {
        rule["type"] = "number"
    }
    if (["CheckBox", "MultiSelect", "DateRange", "DateTimeRange"].includes(component.componentType)) {
        rule["type"] = "array"
    }
    return rule
}
function tempSubmit() {
    formRef.value?.validate((errors) => {
        if (!errors) {
            emits('tempSubmit')
        }
    })
}

function submit() {
    formRef.value?.validate((errors) => {
        console.log(errors)
        if (!errors) {
            emits('submit')
        }
    })
}
</script>
<template>
    <n-card :content-style="{ overflowY: 'auto' }" :title="flowStore.modelInfo.modelName" :closable="props.closable"
        @close="emits('cancel')">
        <template #header-extra>
            <div v-if="['3', '4', '5'].includes(flowStore.mode)">
                <user-info-popover placement="bottom" :user-info="flowStore.instanceInfo?.userInfo">
                    <div style="cursor: pointer;">
                        提交人：<span style="color: rgb(24, 144, 255)"> {{ flowStore.instanceInfo?.userInfo.userName }} </span>
                    </div>
                </user-info-popover>
            </div>
        </template>
        <n-form ref="formRef" :model="flowStore" :label-placement="flowStore.getLabelPlacement"
            :label-align="flowStore.getLabelAlign" :label-width="flowStore.formProperties.labelWidth"
            :require-mark-placement="flowStore.formProperties.requireMarkPlacement">
            <n-grid :cols="24" :x-gap="flowStore.formProperties.xGap">
                <n-form-item-gi v-for="(component, index) in flowStore.formComponentList" :key="component.componentCode"
                    :span="component.componentSpan"
                    :label="['Divider'].includes(component.componentType) ? '' : component.componentName"
                    :show-label="!['Grid', 'Divider'].includes(component.componentType)"
                    :show-feedback="!['Grid', 'Divider'].includes(component.componentType)"
                    :show-require-mark="component.componentRequired === '1'"
                    :path="`formComponentList[${index}].componentValue`" :rule="getFormRule(component)">

                    <n-divider v-if="component.componentType === 'Divider'" :dashed="component.componentLineDashed === '1'"
                        :title-placement="component.componentTitlePlacement">
                        {{ component.componentName }}
                    </n-divider>

                    <n-input v-if="component.componentType === 'Input'" type="text" v-model:value="component.componentValue"
                        :placeholder="component.componentPlaceholder ? component.componentPlaceholder : '请输入内容'"
                        clearable />

                    <n-input v-if="component.componentType === 'TextArea'" type="textarea"
                        v-model:value="component.componentValue"
                        :placeholder="component.componentPlaceholder ? component.componentPlaceholder : '请输入内容'"
                        clearable />

                    <n-input-number v-if="component.componentType === 'Number'" v-model:value="component.componentValue"
                        :placeholder="component.componentPlaceholder ? component.componentPlaceholder : '请输入数字'"
                        clearable />

                    <n-radio-group v-if="component.componentType === 'Radio'" v-model:value="component.componentValue">
                        <n-space>
                            <n-radio v-for="option in component.componentOptions" :key="option" :label="option"
                                :value="option" />
                        </n-space>
                    </n-radio-group>

                    <n-checkbox-group v-if="component.componentType === 'CheckBox'"
                        v-model:value="component.componentValue">
                        <n-space>
                            <n-checkbox v-for="option in component.componentOptions" :key="option" :label="option"
                                :value="option" />
                        </n-space>
                    </n-checkbox-group>

                    <n-select v-if="component.componentType === 'Select'" v-model:value="component.componentValue" :options="component.componentOptions?.map((item) => {
                        return { label: item, value: item }
                    })" :placeholder="component.componentPlaceholder ? component.componentPlaceholder : '请选择'"
                        clearable />

                    <n-select v-if="component.componentType === 'MultiSelect'" v-model:value="component.componentValue"
                        multiple :options="component.componentOptions?.map((item) => {
                            return { label: item, value: item }
                        })" :placeholder="component.componentPlaceholder ? component.componentPlaceholder : '请选择'"
                        clearable />

                    <n-date-picker v-if="component.componentType === 'Date'" type="date"
                        v-model:value="component.componentValue"
                        :placeholder="component.componentPlaceholder ? component.componentPlaceholder : '请选择日期'"
                        clearable />

                    <n-date-picker v-if="component.componentType === 'DateRange'" type="daterange"
                        v-model:value="component.componentValue" clearable />

                    <n-date-picker v-if="component.componentType === 'DateTime'" type="datetime"
                        v-model:value="component.componentValue"
                        :placeholder="component.componentPlaceholder ? component.componentPlaceholder : '请选择日期时间'"
                        clearable />

                    <n-date-picker v-if="component.componentType === 'DateTimeRange'" type="datetimerange"
                        v-model:value="component.componentValue" clearable />

                    <n-time-picker v-if="component.componentType === 'Time'" v-model:value="component.componentValue"
                        :placeholder="component.componentPlaceholder ? component.componentPlaceholder : '请选择时间'"
                        clearable />
                </n-form-item-gi>
            </n-grid>
        </n-form>
        <template #footer>
            <n-space v-if="['0', '1', '2', '5'].includes(flowStore.mode)" justify="end">
                <n-button @click="emits('cancel')">取消</n-button>
                <n-button type="primary" @click="tempSubmit">暂存</n-button>
                <n-button type="primary" @click="submit">提交</n-button>
            </n-space>
        </template>
    </n-card>
</template>
<style scoped></style>